<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    <span :class="[$style.title]">文件夹提醒</span>
  </div>
  <div :class="[$style.body]" v-loading="loading">
    <el-checkbox v-model="form.enabled" @change="onSave">文件夹变动提醒</el-checkbox>
    <div class="my-2" v-if="form.enabled">
      <span>提醒方式: </span>
      <el-checkbox v-model="form.noticeChannel" @change="onSave">通知</el-checkbox>
      <el-checkbox v-model="form.emailChannel" @change="onSave">邮件</el-checkbox>
    </div>
    <div class="ft-sm text-secondary">文件夹重命名、删除以及子文档的新建、删除、重命名、更新等。</div>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import { getDocRemind, createDocRemind, updateDocRemind } from '@/api/doc-remind'

@Component
export default class DirRemind extends Vue {
  @Prop() data!: any

  row: any = null

  form = {
    enabled: false,
    emailChannel: false,
    noticeChannel: true
  }

  loading = false

  onSave () {
    const isNew = !this.row?.id
    console.log(this.form)
    const req: any = {
      emailChannel: this.form.emailChannel,
      noticeChannel: this.form.noticeChannel,
      ...(isNew ? { docId: this.data.id } : { enabled: this.form.enabled })
    }
    const request = isNew ? createDocRemind(req) : updateDocRemind(this.row?.id, req)
    request.then(data => {
      this.row = data || null
      this.initForm()
      this.$message.success(this.row.enabled ? '已设置提醒' : '已取消提醒')
    })
  }

  loadRow () {
    this.loading = true
    getDocRemind(this.data.id).then(data => {
      this.row = data || null
      this.initForm()
    }).finally(() => {
      this.loading = false
    })
  }

  initForm () {
    const { enabled = false, emailChannel = false, noticeChannel = true } = this.row || {}
    Object.assign(this.form, { enabled, noticeChannel, emailChannel })
  }

  created () {
    this.loadRow()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.header {
  color: $text-heading-color;
  font-weight: 600;
  padding: 0 12px;
}

.body {
  margin: 8px 0;
  padding: 0 20px;
}

</style>
